import { env, innerUrls } from '@/shared/constants';
import { Button, ButtonVariants } from '@/shared/ui';
import Image from 'next/image';

import PromoImgMobile from '../../images/promo3-image-mobile.png';
import PromoImg from '../../images/promo3-image.png';
import { PromoCard } from './PromoCard';
import cs from './PromoCard.module.scss';

export const Promo3 = () => (
  <PromoCard
    image={
      <>
        <div className={cs.desktop}>
          <Image alt="banner" src={PromoImg} />
        </div>
        <div className={cs.mobile}>
          <Image alt="banner" src={PromoImgMobile} />
        </div>
        {/* <PromoImage className={cs.desktop} /> */}
        {/* <PromoMobileImage className={cs.mobile} /> */}
      </>
    }
  >
    <p className={cs.text}>
      Больше информации про прикорм и&nbsp;ответы на&nbsp;вопросы родителей вы&nbsp;найдете в гайде «Прикорм
      и&nbsp;питание с&nbsp;4&nbsp;месяцев до&nbsp;5&nbsp;лет»
    </p>
    <Button
      className={cs.button}
      href={innerUrls.course(env.courses.feeding)}
      link
      target="_self"
      variant={ButtonVariants.Primary}
    >
      Подробнее
    </Button>
  </PromoCard>
);
